<template>
  <div 
    class="circle-text-component"
    :style="componentStyle"
  >
    <input
      v-if="isEditing"
      ref="textInput"
      v-model="editingText"
      class="text-input"
      @blur="finishEdit"
      @keyup.enter="finishEdit"
      @keyup.esc="cancelEdit"
    />
    <div v-else class="text-display" @dblclick="startEdit">
      {{ componentData.props.text || '圆形' }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, nextTick } from 'vue'
import type { ComponentConfig } from '../../interface'

// Props
interface Props {
  componentData: ComponentConfig
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  update: [component: ComponentConfig]
  delete: [componentId: string]
}>()

// 响应式数据
const isEditing = ref(false)
const editingText = ref('')
const textInput = ref<HTMLInputElement | null>(null)

// 计算组件样式
const componentStyle = computed(() => {
  const style = props.componentData.style || {}
  
  // 基础样式对象
  const baseStyle = {
    width: '100px',
    height: '100px',
    minWidth: '100px',
    minHeight: '100px',
    borderRadius: '50%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'text',
    border: '1px solid',
    transition: 'all 0.2s ease',
    userSelect: 'none' as const,
    fontFamily: 'inherit',
    backgroundColor: style.backgroundColor || '#ffffff',
    borderColor: style.borderColor || '#dcdfe6',
    borderWidth: style.borderWidth || '1px',
    fontSize: style.fontSize || '14px',
    color: style.color || '#333',
    fontWeight: style.fontWeight || 'normal',
    opacity: style.opacity !== undefined ? style.opacity : 1,
    boxSizing: 'border-box' as const
  }
  
  // 合并外部样式，但保护圆形关键属性
  return {
    ...baseStyle,
    ...style,
    // 强制保护圆形属性，确保不被覆盖
    width: '100px',
    height: '100px',
    minWidth: '100px',
    minHeight: '100px',
    borderRadius: '50%'
  }
})

// 开始编辑
const startEdit = () => {
  isEditing.value = true
  editingText.value = props.componentData.props.text || ''
  
  nextTick(() => {
    if (textInput.value) {
      textInput.value.focus()
      textInput.value.select()
    }
  })
}

// 完成编辑
const finishEdit = () => {
  if (editingText.value.trim() !== '') {
    // 更新组件的文本
    if (props.componentData.props) {
      props.componentData.props.text = editingText.value.trim()
    }
    // 发出更新事件
    emit('update', props.componentData)
  }
  isEditing.value = false
}

// 取消编辑
const cancelEdit = () => {
  editingText.value = props.componentData.props.text || ''
  isEditing.value = false
}
</script>

<style lang="scss" scoped>
.circle-text-component {
  // 文本显示样式
  .text-display {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: text;
    user-select: none;
    text-align: center;
    
    &:hover {
      background-color: rgba(64, 158, 255, 0.05);
    }
  }
  
  // 文本输入样式
  .text-input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    text-align: center;
    padding: 0;
    margin: 0;
    
    &::placeholder {
      color: #c0c4cc;
    }
  }
}
</style>
